<template>
	<view class="flex service-item" v-if="dataItem.title"  @click="toDetail(dataItem.id)">
		<image style="width: 176rpx;height: 176rpx;" :src="dataItem.picUrls" mode=""></image>
		<view class="service-item-info flex flex-1 flex-column flex-space-between">
			<view class="font32 f-b title flex flex-align-center flex-space-between">
				{{dataItem.title}}
				<image v-if="showCart" style="width: 64rpx;height: 64rpx;margin-right: 34rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_cart.png" mode=""></image>
			</view>
			<view class="intro font28">{{dataItem.content}}</view>
			<view class="price f-b font32 flex flex-align-center flex-space-between" v-show="dataItem.salesPrice">
				¥{{dataItem.salesPrice}}
				<view v-show="showButton" class="button-take flex flex-center font28 color-w">去下单</view>
			</view>
			
		</view>	
	</view>
	<view class="noData" v-else>
		无数据
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		},
		showCart: {
			type: Boolean,
			default: false
		},
		showButton: {
			type: Boolean,
			default: false
		}
	})
	
	function toDetail(id){
		uni.navigateTo({
			url:`../detail/detail?id=${id}`    //"../detail/detail?id="
		})
	}
	onLoad(() => {
		console.log(props.dataItem,'dataItem')
	})
</script>

<style lang="scss" scoped>
	.service-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #E5E5E5;
		image {
			border-radius: 20rpx;
		}
		.service-item-info {
			margin-left: 20rpx;
			.title {
				color: #181D18;
			}
			.intro {
				color: #8e8e8e;
				margin-top: 10rpx;
			}
			.price {
				color: #F52200;
				margin-top: 20rpx;
			}
			.button-take {
				border-radius: 32rpx;
				height: 64rpx;
				padding: 0rpx 34rpx;
				background-color: #3FA897;
				margin-right: 22rpx;
			}
		}
		
	}
	.noData{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
	}
</style>